<table class="table dataTable" ngClass="{{config.className || ''}}" role="grid" style="width: 100%;">
    <thead>
        <tr role="row">
            <th *ngIf="editMode == true">
                <p>Select</p>
                <label (click)="selectAllItems(true)" class="glyphicon glyphicon-check text-success"></label>-
                <label (click)="selectAllItems(false)" class="glyphicon glyphicon-unchecked text-danger"></label>
            </th>
            <th *ngIf="tableRole === 'fulledit' || tableRole === 'viewdelete' || tableRole === 'view'" [ngStyle]="exportType ? {'min-width': '125px'} : {'min-width': '80px'}">
            </th>
            <ng-container *ngIf="checkRows">
                <th style="width: 80px; text-align: center; padding-bottom: 15px;" [ngClass]="rows.length === 0 ? ['bg-warning'] : ''">
                    <i *ngIf="rows.length == 0" class="glyphicon glyphicon-warning-sign label label-warning" container=body [tooltip]="'No results'"> </i>
                </th>
            </ng-container>
            <!--HEADER -->
            <ng-container *ngIf="extraActions">
                    <ng-container *ngIf="extraActions['position'] === 'first'">
                
                <th *ngFor="let action of extraActions['data'] " style="vertical-align: middle; text-align: center; min-width:125px !important; ">
                    {{action.title}}
                </th>
                </ng-container>
            </ng-container>
            <th *ngFor="let column of columns" [ngTableSorting]="config" [column]="column" (sortChanged)="onChangeTable($event)" ngClass="{{column.className || ''}}" style="vertical-align: middle; text-align: center; width:auto !important; white-space:nowrap" container=body [tooltip]="column.tooltipInfo ? tooltipValues : ( column.tooltip ? column.tooltip : column.name)">

                <ng-template #tooltipValues>
                    <ng-container>
                        <h6> {{column.title}} </h6>
                        <hr/>
                    </ng-container>
                    <div *ngFor="let test of (column.tooltipInfo | keyParser) " style="text-align:left !important ">
                        <span *ngIf=" test.key !='IsTag' && test.key !='Report' && test.value !==null ">
                          <span class="text-left " style="padding-left: 10px " ><b>{{test.key}}</b></span>
                        <span class="text-right">{{test.value}} </span>
                        </span>
                    </div>
                </ng-template>
                <span style="white-space: normal">{{column.title}}</span>
                <i *ngIf="column.icon" [ngClass]="'glyphicon glyphicon-'+column.icon"></i>
                <span *ngIf="column.tooltipInfo && column.tooltipInfo.IsTag" class="badge">Tag</span>
                <small *ngIf="config" style="display:inline" class="glyphicon text-muted" [ngClass]="{ 'glyphicon-sort' : column.sort === '' || !column.sort, 'glyphicon-chevron-down': column.sort==='desc' , 'glyphicon-chevron-up': column.sort==='asc' } "></small>
            </th>
            <ng-container *ngIf="extraActions">
                    <ng-container *ngIf="extraActions['position'] === 'last'">
                
                <th *ngFor="let action of extraActions['data'] " style="vertical-align: middle; text-align: center; width:auto !important; ">
                    {{action.title}}
                </th>
                </ng-container>
            </ng-container>
        </tr>
    </thead>
    <tbody>
        <tr *ngIf="showFilterRow ">
            <td *ngIf="(tableRole === 'fulledit' || tableRole === 'viewdelete' || tableRole === 'view') && showStatus === false" style="width:100px ">
            </td>
            <td *ngIf="tableRole === 'fulledit' || tableRole === 'viewdelete' || tableRole === 'view'" style="width:100px ">
            </td>

            <td *ngFor="let column of columns ">
                <input *ngIf="column.filtering " placeholder="{{column.filtering.placeholder}} " [ngTableFiltering]="column.filtering " class="form-control " style="width: auto; " (tableChanged)="onChangeTable(config) " />
            </td>
        </tr>
        <tr *ngFor="let row of rows; index as i ">
            <td *ngIf="editMode==true ">
                <i [ngClass]="checkItems(row.ID) ? [ 'glyphicon glyphicon-unchecked text-danger'] : [ 'glyphicon glyphicon-check text-success'] " (click)="selectItem(row) "></i>
            </td>
            <td *ngIf="(tableRole === 'fulledit' || tableRole === 'viewdelete' || tableRole === 'view') && showStatus === false">
                <i *ngFor="let action of roleActions" [ngClass]="action.icon" [tooltip]="action.tooltip" (click)="customClick(action.name, row)" style="padding-left:5px">
                </i>
            </td>
        <ng-container *ngIf="extraActions">
            <ng-container *ngIf="extraActions['position'] === 'first'; then extraActionsContent">
            </ng-container>
        </ng-container>
            <td *ngIf="showStatus==true " style="min-width: 170px ">
                <label style="display: inline; margin-right: 2px " container=body [tooltip]=" 'View '+ row.ID " class="label label-primary glyphicon glyphicon-eye-open " (click)="viewItem(row) "></label>
                <span style="border-right: 1px solid #1B809E; padding-right: 6px ">
          <label style="display: inline; margin-right: 2px " container=body [tooltip]=" 'Test connection '+ row.ID " class="label label-primary glyphicon glyphicon glyphicon-flash " (click)="testConnection(row) "></label>
        </span>
                <span style="padding-left: 12px ">
          <label style="display: inline; margin-right: 2px " container=body [tooltip]="row.Active ? 'Active' : 'Not active' " [ngClass]="row.Active ? 'glyphicon glyphicon-play label label-success' :
          'glyphicon glyphicon-pause label label-danger' "></label>
        </span>
                <label style="display: inline; margin-right: 2px " container=body [tooltip]="row.Connected ? 'Connected' : 'Not connected' " [ngClass]="row.Connected ? 'glyphicon glyphicon-globe label label-success' :
        'glyphicon glyphicon-warning-sign label label-danger' "></label>
            </td>
            <ng-container *ngIf="checkRows ">
                <td style="width: 80px; text-align: center; padding-top: 15px; " [ngClass]="row.valid===true? [ 'bg-success'] : [ 'bg-warning'] ">
                    <i [ngClass]="row.valid===true ? [ 'glyphicon glyphicon-ok-sign label label-success'] : [ 'glyphicon glyphicon-warning-sign label label-warning'] " container=body [tooltip]="row.valid===true ? 'Valid measurement' :
          'Invalid Measurement' "> </i>
                </td>
            </ng-container>
            <td [ngClass]=" row.class  ? (row.class[column.name] ? [ row.class[column.name] ] : '' ) : '' " (click)="cellClick(row, column.name) " *ngFor="let column of columns; let i=index " container=body [tooltip]="row.tooltipInfo ? tooltipValues : (column.name==='ID' ? row.Description : '') " [innerHtml]="sanitize(row[column.name],column.transform) " style="text-align:right ">

                <ng-template #tooltipValues>
                    <h6 *ngIf="row.Index ">Indexed : {{row.Index }}</h6>
                    <ng-container *ngIf="column.name !=='Index' ">
                        <h6> Metric:{{column.name}}</h6>
                        <hr/>
                    </ng-container>
                    <div *ngFor="let test of (row.tooltipInfo[column.name] | keyParser) " style="text-align:left !important ">
                        <span class="text-left " style="padding-left: 10px " *ngIf="test.value !==null || test.key==='CookedValue' "><b>{{test.key}}</b></span>
                        <span class="text-right " *ngIf="test.key==='CurTime' "> {{test.value | date:'d/M/y H:m:s'}}</span>
                        <span class="text-right " *ngIf="test.key==='LastTime' "> {{test.value | date:'d/M/y H:m:s'}}</span>
                        <span class="text-right " *ngIf="test.key !=='CurTime' && test.key !=='LastTime' && test.value !==null ">{{test.value}} </span>
                    </div>
                </ng-template>

            </td>
            
            <ng-container *ngIf="extraActions">
            <ng-container *ngIf="extraActions['position'] === 'last'; then extraActionsContent">
            </ng-container>
        </ng-container>
            
            <ng-template #extraActionsContent>
                <td *ngFor="let action of extraActions['data'] " style="text-align: center ">
                    <ng-container *ngFor="let i of action.content">
                        <label  *ngIf="i.type=='boolean-label'"role="button"  [tooltip]= "i.tooltip" container=body (click)="extraActionClick(row,i.action,i.property) " [ngClass]="row[i.property] ? [ 'label label-success'] : [ 'label label-danger'] " [innerHtml]="row[i.property] ? i['enabled'] : i['disabled'] "></label>
                        <button *ngIf="i.type=='boolean'" [tooltip]= "i.tooltip" container=body (click)="extraActionClick(row,i.action,i.property) " [ngClass]="row[i.property] ? [ 'btn btn-success'] : [ 'btn btn-danger'] " [innerHtml]="row[i.property] ? i['enabled'] : i['disabled'] "></button>                     
                        <label *ngIf="i.type=='button-label'" role="button"  [tooltip]= "i.tooltip" container=body class="label label-primary " (click)="extraActionClick(row,i.action)" [innerHtml]="i['text']"></label>
                        <button *ngIf="i.type=='button'" [tooltip]= "i.tooltip" container=body class="btn btn-primary " (click)="extraActionClick(row,i.action)" [innerHtml]="i['text']"></button>
                    </ng-container>
                </td>
            </ng-template>
        </tr>
    </tbody>
</table>
